<template>
  <div>
    <pan-simple-header />
    <div class="office-iframe-content">
      <!-- <iframe class="office-iframe" :src="showPath" frameborder="0" /> -->
      <div style="height: 850px; overflow-y: auto" v-html="content" />
    </div>
  </div>
</template>

<script>
import PanSimpleHeader from '../../../components/simple-header'
import panUtil from '../../../utils/common'
import mammoth from 'mammoth'

export default {
  name: 'Office',
  components: { PanSimpleHeader },
  data() {
    return {
      showPath: '',
      content: '',
    }
  },
  methods: {
    init() {
      let fileId = this.$route.params.fileId
      //   console.log(panUtil.getPreviewUrl(fileId))
      //   this.showPath =
      //     'https://view.officeapps.live.com/op/view.aspx?src=' +
      //     escape(panUtil.getPreviewUrl(fileId))
      var xhr = new XMLHttpRequest()
      xhr.open('GET', panUtil.getPreviewUrl(fileId), true)
      xhr.responseType = 'arraybuffer'
      const rhis = this
      xhr.onload = function () {
        if (xhr.status === 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function (res) {
              rhis.$nextTick(() => {
                rhis.content = res.value
              })
            })
        }
      }
      xhr.send()
    },
  },
  computed: {},
  mounted() {
    this.init()
  },
}
</script>

<style scoped>
.office-iframe-content {
  width: 100%;
  margin-top: 62px;
  display: block;
  text-align: center;
}

.office-iframe {
  width: 100%;
  height: 1200px;
}
</style>
